<template>
  <div>
    <!-- 表单查询 -->
    <a-form
      :form="form"
      size="small"
      :label-col="{ span: 10 }"
      :wrapper-col="{ span: 14 }"
      ref="form"
    >
      <a-row type="flex">
        <a-col :span="4">
          <a-form-item label="项目名称:">
            <a-input size="small" v-model="form.name" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="修改类型:">
            <a-select size="small" v-model="form.update">
              <a-select-option value="update">test</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="项目类型:">
            <a-select size="small" v-model="form.type">
              <a-select-option value="type">test</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="所属市:">
            <a-select size="small" v-model="form.city">
              <a-select-option value="city">test</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="所属区:">
            <a-select size="small" v-model="form.area">
              <a-select-option value="area">test</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="" type="flex">
            <a-button size="small" style="margin: 2px" @click="getForm">
              查询
            </a-button>
            <a-button size="small" style="margin: 1px" @click="resetForm">
              重置
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <template slot="operation">
          <a href="javascript:;" @click="handleInfo">详情</a>
          <a href="javascript:;" @click="handleInfo" style="margin-left: 5px"
            >编辑</a
          >
          <a href="javascript:;" style="margin-left: 5px">删除</a>
        </template>
      </a-table>
    </div>
    <!-- 实现修改编辑的弹出模态框 -->
    <a-modal
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="确定"
      cancelText="取消"
      :width="800"
    >
      <!-- table 列表展示部分 -->
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="项目基本信息">
          <a-row type="flex">
            <a-col :span="12">
              <p class="left-font">统一编号:<span class="right-font">-</span></p>
              <p class="left-font">
                项目名称:<span class="right-font">达州市通川区渡鑫石材厂生态保护修复项目</span>
              </p>
              <p class="left-font">中央财政:<span class="right-font">-</span></p>
              <p class="left-font">所属省:<span class="right-font">四川省</span></p>
              <p class="left-font">所属市:<span class="right-font">四川省</span></p>
              <p class="left-font" style="margin-top: 20px">矿山列表<span></span></p>
            </a-col>
            <a-col :span="12">
              <p class="left-font">项目编号:<span class="right-font">XM51170220200000003</span></p>
              <p class="left-font">投资资金:<span class="right-font">-</span></p>
              <p class="left-font">省级财政:<span class="right-font">-</span></p>
              <p class="left-font">所属省:<span class="right-font">达州市</span></p>
              <p class="left-font">所属县:<span class="right-font">通州区</span></p>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="项目进度" force-render> </a-tab-pane>
        <a-tab-pane key="3" tab="资金拨付进度"> </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import { columns, data } from "./tableData.js";
export default {
  data() {
    return {
      visible: false,
      data,
      columns,
      form: {
        name: "",
        update: "",
        type: "",
        city: "",
        area: "",
      },
    };
  },
  methods: {
    callback(key) {},
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    getForm() {
      console.log(this.form); //这里的this.form 就是查询中所有的参数
    },
    resetForm() {
      for (let i in this.form) {
        this.form[i] = "";
      }
    },
    handleInfo() {
      this.visible = true;
    },
  },
};
</script>

<style>
.ant-table-body {
  background-color: white;
}
.left-font{
  color: rgb(0, 0, 0,0.4);
}
.right-font{
  color: rgb(0, 0, 0,1);
}
</style>